<template>
  <div class="page-content" v-if="!showDetail">
    <a-card style="width: 100%; height: 100%">
      <div class="header">
        <Condition
          :condition="condition"
          :btns="['search', 'reset']"
          @search="searchHandle"
          @reset="reset"
        >
          <a-form-item>
            <a-button type="primary" @click="addOrUpdateHandle('')">新增</a-button>
          </a-form-item>
        </Condition>
        <span> 共筛选出 {{ pagination.total }} 条数据 </span>
      </div>
      <div class="main">
        <a-table
          class="table"
          size="small"
          :loading="loading"
          :dataSource="List"
          :columns="columns"
          :pagination="pagination"
          @change="paginationChange"
          :sticky="{ offsetHeader: 0 }"
        >
          <template #bodyCell="{ column, text, record, index }">
            <template v-if="column.dataIndex == 'no'">
              {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a-button type="link" @click="addOrUpdateHandle(record)">查看</a-button>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>
  </div>
  <Info v-else ref="addOrUpdataRef" @close="goBack" />
</template>
<script lang="ts" setup>
import Condition from '@/components/ConditionSearch/index.vue'
import { ref, onMounted, reactive, nextTick } from 'vue'
import Info from './info.vue'
import dayjs from 'dayjs'

import { getKnowledgeBaseList, getCreateUser } from '@/api/knowledgeBase/index.ts'
import { getTags } from '@/api/template.ts'

const labelData = ref([])
const creatorData = ref([])
const showDetail = ref(false)
const loading = ref<boolean>(false)
const List = ref<any[]>([])
const condition = ref([
  {
    title: '',
    dataIndex: 'title',
    type: 'input',
    value: '',
    placeholder: '请输入文章标题'
  },
  {
    title: '',
    dataIndex: 'creator',
    type: 'select',
    value: undefined,
    data: creatorData.value,
    showSearch: true,
    placeholder: '请选择创建人'
  },
  {
    title: '',
    dataIndex: 'categoryName',
    type: 'select',
    value: undefined,
    data: labelData.value,
    showSearch: true,
    placeholder: '请选择标签'
  }
])
const columns = ref<any[]>([
  {
    title: '序号',
    dataIndex: 'no',
    key: 'no',
    align: 'left',
    width: 80
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'left',
    width: 250
  },
  {
    title: '文章标题',
    dataIndex: 'title',
    key: 'title',
    align: 'left'
  },
  {
    title: '标签',
    dataIndex: 'categoryName',
    key: 'categoryName',
    align: 'left',
    width: 300
  },
  {
    title: '创建人',
    dataIndex: 'creator',
    key: 'creator',
    align: 'left',
    width: 100
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    align: 'left',
    width: 90
  }
])
const pagination = ref<any>({
  current: 1,
  total: 0,
  pageSize: 10,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100'],
  showQuickJumper: true
})
const paginationChange = (page: any) => {
  pagination.value = { ...page }
  loading.value = true
  getDataList()
}
const getDataList = () => {
  const obj = condition.value.reduce((c, v) => {
    if (v.value || v.value === 0) {
      if (v.dataIndex == 'createTime') {
        return Object.assign(c, {
          begin: v.value.length ? dayjs(v.value[0]).format('YYYY-MM-DD HH:mm:00') : '',
          end: v.value.length ? dayjs(v.value[1]).format('YYYY-MM-DD HH:mm:00') : ''
        })
      } else {
        return Object.assign(c, { [v.dataIndex]: v.value })
      }
    } else {
      return c
    }
  }, {})
  getKnowledgeBaseList({
    ...obj,
    page: pagination.value.current,
    limit: pagination.value.pageSize
  })
    .then((res) => {
      List.value = res.data.list
      pagination.value.total = res.data.total
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
onMounted(async () => {
  creatorData.value = []
  labelData.value = []
  loading.value = true

  await getCreateUser().then(async (res) => {
    res.data.map((item) => {
      item.label = item.realName
      item.value = item.id
    })
    creatorData.value = res.data
    condition.value[1].data = res.data
  })

  await getTags().then(async (res) => {
    res.data.map((item) => {
      item.label = item.dictLabel
      item.value = item.dictLabel
    })
    labelData.value = res.data
    condition.value[2].data = res.data
  })

  condition.value = [...condition.value]

  getDataList()
})
const onDelete = (data) => {}
const addOrUpdataRef = ref()
const addOrUpdateHandle = (data) => {
  showDetail.value = true
  nextTick(() => {
    addOrUpdataRef.value.init(data, labelData.value)
  })
}
const searchHandle = () => {
  pagination.value.current = 1
  loading.value = true
  getDataList()
}
const reset = () => {
  pagination.value.current = 1
  pagination.value.pageSize = 10
  condition.value.map((v) => {
    if (v.type === 'select') {
      v.value = undefined
    } else if (v.type === 'dayRange') {
      v.value = []
    } else {
      v.value = ''
    }
  })
  loading.value = true
  getDataList()
}
const goBack = (value) => {
  showDetail.value = false
  loading.value = true
  getDataList()
}
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
}

.main {
  flex: 1 1 auto;
  margin-top: 16px;
  overflow: hidden auto;
}
</style>
